<template>
    <div class="navbottom">
        <div class="Input">
           <img :src="pencil" style="width: 20px;">
           <span style="font-size: 10px;margin-left: 10px;color: rgba(128,128,18,0.6);">写点什么吧... </span>
        </div>
        <img :src="theLove" @click="Like" style="width: 24px;margin-left: 8px;"><span>{{like}}</span>
        <img :src="theStar" @click="Star" style="width: 25px;margin-bottom: 2px;"><span>{{star}}</span>
    </div>
</template>

<script>
import {reactive,toRefs} from 'vue';
export default{
    props:{
        like:Number,
        star:Number,
        toLike:Function,
        toStar:Function
    },
    setup(props){
        const pencil=require('../assets/pencil.png')
        const love1=require('../assets/loveBlack.png')
        const love2=require('../assets/loveRed.png')
        const star1=require('../assets/starBlack.png')
        const star2=require('../assets/starRed.png')
        const state=reactive({
            isLoved:true,
            isStar:false,
            theLove:love2,
            theStar:star1,
        })
        
        const Like=()=>{
            if(state.isLoved){
                props.toLike(-1);
                state.theLove=love1;
            }else{
                props.toLike(1);
                state.theLove=love2;
            }
            state.isLoved=!state.isLoved
        }
        const Star=()=>{
            if(state.isStar){
                props.toStar(-1);
                state.theStar=star1;
            }else{
                props.toStar(1);
                state.theStar=star2;
            }
            state.isStar=!state.isStar
        }
        return {pencil,...toRefs(state),Like,love1,love2,Star,star1,star2};
    }
}
</script>

<style scoped>
.navbottom{
    width: 360px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Input{
    display: flex;
    align-items: center;
    width: 225px;
    height: 30px;
    background: rgba(128,128,128,0.2);
    border-radius: 20px;
    padding-left: 8px;
}
</style>